<template>
	<div class="home">
		<div class="top">
			<!-- 搜索框 -->
			<van-search
				v-model="keywords"
				shape="round"
				background="#4fc08d"
				placeholder="请输入搜索关键词"
			/>
			<div class="search">
				<li v-for="item in search(keywords)" :key="item._id">
					<p @click="godetail(item._id)">{{ item.name }}</p>
				</li>
			</div>
			<!-- 商品轮播 -->
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="item in images" :key="item._id">
					<img :src="item.coverImg" alt="" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 商品列表 -->
		<van-list
			v-model="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="getProductList"
		>
			<li
				v-for="item in productList"
				:key="item._id + Math.random()"
				@click="godetail(item._id)"
			>
				<van-card
					:price="item.price"
					:desc="item.descriptions"
					:title="item.name"
					:thumb="item.coverImg"
				/>
			</li>
		</van-list>
	</div>
</template>

<script>
import { reqLunboP, reqProductList } from "@/api/product";
export default {
	data() {
		return {
			
			keywords: "",
			show: false,
			
			images: [],
			// 商品列表
			productList: [],
			// 加载的默认值
			loading: false,
			finished: false,
			page: 1,
		};
	},
	computed: {},
	watch: {},

	methods: {
		// 获取轮播图的数组，调用接口。
		async getLunboP() {
			let data = {
				per: 4,
				page: 1,
			};
			const res = await reqLunboP(data);
			// console.log(res);
			this.images = res.products;
		},
		// 获取商品列表，调用接口结合加载更多
		async getProductList() {
			// 开启加载框
			this.loading = true;
			const data = {
				pre: 10,
				page: this.page,
			};
			// 调用接口
			const res = await reqProductList(data);
			// 关闭加载框
			this.loading = false;
			console.log(res);
			// 判断获取的长度小于10，说明没有商品了
			if (res.products.length < 10) {
				// 说明是最后一页
				this.finished = true;
			} else {
				this.page++;
			}
			// 当向下加载的时候，要让之前的数组加加载的数组
			this.productList = [...this.productList, ...res.products];
		},
		// 搜索框  方法一旦在页面调用就会把return的结果渲染。
		search(keywords) {
			let searchArr = [];
			if (keywords == "") {
				searchArr = [];
			} else {
				// 遍历数组
				searchArr = this.productList.filter((item) => {
					// 如果数组中的名字中有关键字，就添加到新的数组。
					if (item.name.includes(keywords)) {
						return item;
					}
				});
			}
			return searchArr;
		},
		// 点击商品跳转详情页
		godetail(id) {
			this.$router.push("/detail/" + id);
		},
	},
	created() {
		// 在这里调用方法函数
		this.getLunboP();
		// 使用获取商品列表方法
		this.getProductList();
	},
	mounted() {},
	components: {},
};
</script>
<style scoped>
.top {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1;
}
.top .van-search {
	width: 100%;
}
.search {
	position: absolute;
	top: 50px;
	z-index: 2;
	width: 100%;
}
.search p {
	background-color: aqua;
	width: 100%;
	height: 25px;
	line-height: 25px;
	text-indent: 20px;
	border-bottom: 1px dashed #ccc;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 20px;
	line-height: 150px;
	text-align: center;
	background-color: #39a9ed;
}
.my-swipe {
	width: 100%;
	height: 250px;
}
.my-swipe img {
	width: 100%;
	height: 250px;
}
li {
	list-style: none;
}
.van-list {
	margin-top: 305px;
	margin-bottom: 40px;
}
</style>
